02
Brand Elements
Logo
Wordmark
After multiple evolutions the primary Stocksy brand graphic has been distilled to the isolated wordmark. The simple, hand-tooled script maintains the built up brand equity, and the creative expression at the heart of the brand’s purpose while allowing for maximum flexibility in future applications.
Clearspace
The minimum clearspace for all versions of the logo is deliberately generous. Margins on all sides should be at least the height of the mark itself.
Secondary Co-op Logo
In applications designed exclusively for members or potential creative contributors where the co-op model has more relevance and value, the secondary version can be used in place of the primary wordmark. These cases should be executed in consultation with design leadership.
Typography
General Rules
• Legibility is the primary aim
• Use fewer sizes whenever possible within your design
• Determine the appropriate "Regular" properties for your design's format and scale and work outward
• Decrease letter-spacing for large type sizes; increase letter-spacing for small type sizes
• Decrease font weight for large type sizes; increase font-weight for small type sizes
Typefaces
Poppins
Selected for its easy flexibility and legibility, use of this single typeface provides a consistent, neutral base that can comfortably shapeshift or pair with other expressive type treatments as needed in marketing applications. Each letterform is nearly monolinear, with optical corrections applied to stroke joints where necessary to maintain an even typographic color that minimizes distraction from the assets.
Editorial New
As the expressive counter to the former, this takes an opposite approach in most of its defining qualities. Condensed letterforms, high contrast strokes, classic serifs, lower x-height, and a negative axis all contribute to an impactful difference when paired alongside Poppins.
While refined enough for paragraph copy, we focus its use as a display font for titles and accents.
Styles
The following are designed as a set of relative styles to follow across any variety of designed collateral, both digital and physical. An expanded set of detailed styles for UI/UX purposes within the platform is available as required.
Macro
For maximum impact of the most brief titles in special cases
Break text across lines with asymmetrical alignment
10+ rem
Weight 400
Tight letter spacing
Title
For standard heading use
3 rem
Weight 300
Tight letter spacing
Large
For emphasized or introduction paragraph text
1.75 rem
Weight 400
Regular letter spacing
Regular
For body paragraph copy
The base of text within your design
1 rem
Weight 400
Regular letter spacing
Small
For de-emphasized paragraphs and credits
Where necessary to include but not required to be understood
0.75 rem
Weight 400
Regular letter spacing
Proper
For labelling of Stocksy-exclusive proprietary product names
0.75 rem
Weight 500
Extra loose letter spacing
Color
Primary Palette
The primary greyscale palette is composed of ten steps indicating incremental degrees of light. This range provides enough flexibility to calibrate with subtle changes for optimal focus and legibility.
FRSNL 10
FRSNL 09
FRSNL 08
FRSNL 07
FRSNL 06
FRSNL 05
FRSNL 04
FRSNL 03
FRSNL 02
FRSNL 01
FRSNL BG DK
FRSNL BG LT
Secondary Palette
Use of color follows markedly different approaches determined by the touchpoint category and the brand strategy for the relevant audience. Departures from the high contrast greyscale palette of the platform design system can help client facing content and messaging better express progressive and trend sensitive initiatives with minimal changes to other visual elements.
FRSNL G1
FRSNL G2
FRSNL G3
FRSNL G4
FRSNL G5
FRSNL R1
FRSNL R2
FRSNL R3
FRSNL B1
FRSNL B2
FRSNL B3
FRSNL Y1
FRSNL Y2
FRSNL Y3
Seek out the unexpected color pairings this palette makes possible.
Assets & Color
Our primary technique for framing an asset with color is to sample hues from within the image. Consideration should be given to whether the design requires a more neutral or bolder selection. The chosen color should be carefully adjusted to ensure the asset doesn't blend into the background and its bounds are clearly defined.
Icons
The linear construction of the Feather icon set allows for dynamically matching the visual weight of typography at any instance and scale. The overall effect is a uniform interface texture with minimal distraction. Icon use outside of the platform design system indicates a proprietary Stocksy feature or product and should be limited to instances where support for platform navigation is relevant.
Copyright © 2022 Stocksy United. All rights reserved.